<template>
  <PlusDescriptions :column="3" :columns="columns" :data="descriptionsData" />
</template>

<script lang="ts" setup>
import type { PlusColumn, RecordType } from '@wlydfe/pro-ui'

const TestServe = {
  getList: async () => {
    const index = Math.random() * 10
    const data = {
      index,
      id: index,
      title: `序号${index + 1}`,
      name: 'name'.repeat(10),
      status: '1',
      tag: index < 5 ? 'success' : 'danger',
      progress: 30,
      rate: index > 3 ? 2 : 3.5,
      switch: index > 3 ? true : false,
      indexColStyle:
        index < 3
          ? {
              backgroundColor: '#314659',
            }
          : {
              backgroundColor: '#979797',
            },
      time: new Date(),
      code: `
  const getData = async params => {
    const data = await getData(params)
    return { list: data.data, ...data }
  }`,
    }
    return {
      data,
    }
  },
}

const columns: PlusColumn[] = [
  {{COLUMNS_CONFIG}}
]

const descriptionsData = ref<RecordType>({})

const getList = async () => {
  try {
    const { data } = await TestServe.getList()
    descriptionsData.value = data || {}
  } catch (error) {}
}

getList()
</script>
